// =====================================================
// ArticleList - 文章列表（中间面板）
// =====================================================

import { List, Tag, Space, Pagination, Empty, Spin } from "antd";
import { StarOutlined, StarFilled, CheckOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import type { Article } from "../types";

interface ArticleListProps {
  articles: Article[];
  selectedArticle: Article | null;
  onSelectArticle: (article: Article) => void;
  loading: boolean;
  total: number;
  page: number;
  pageSize: number;
  onPageChange: (page: number) => void;
  onRefresh: () => void;
}

export default function ArticleList({
  articles,
  selectedArticle,
  onSelectArticle,
  loading,
  total,
  page,
  pageSize,
  onPageChange,
}: ArticleListProps) {
  // 从 HTML 内容中提取纯文本并截取
  const extractTextSummary = (htmlContent: string, maxLength = 200): string => {
    const textContent = htmlContent
      .replace(/<[^>]*>/g, "") // 移除 HTML 标签
      .replace(/\s+/g, " ") // 合并空白字符
      .trim();

    return textContent.length > maxLength
      ? textContent.substring(0, maxLength) + "..."
      : textContent;
  };

  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      {/* 文章列表 */}
      <div style={{ flex: 1, overflow: "auto", padding: "16px" }}>
        {loading ? (
          <div style={{ textAlign: "center", marginTop: "100px" }}>
            <Spin size="large" />
            <div style={{ marginTop: "16px", color: "#666" }}>加载中...</div>
          </div>
        ) : !articles || articles.length === 0 ? (
          <Empty description="暂无文章" style={{ marginTop: "100px" }} />
        ) : (
          <List
            dataSource={articles}
            renderItem={(article) => (
              <List.Item
                style={{
                  padding: "16px",
                  cursor: "pointer",
                  background:
                    selectedArticle?.id === article.id
                      ? "#e6f7ff"
                      : "transparent",
                  borderRadius: "4px",
                  marginBottom: "8px",
                  border: "1px solid #f0f0f0",
                }}
                onClick={() => onSelectArticle(article)}
              >
                <div style={{ width: "100%" }}>
                  {/* 标题 */}
                  <div
                    style={{
                      fontSize: "16px",
                      fontWeight: 500,
                      marginBottom: "8px",
                    }}
                  >
                    {article.title}
                  </div>

                  {/* 摘要预览 - 优先显示 AI 摘要,否则截取正文 */}
                  <div
                    style={{
                      fontSize: "14px",
                      color: "#666",
                      marginBottom: "8px",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      display: "-webkit-box",
                      WebkitLineClamp: 2,
                      WebkitBoxOrient: "vertical",
                      lineHeight: "1.6",
                    }}
                  >
                    {article.ai_summary
                      ? `🤖 ${article.ai_summary}`
                      : article.content
                      ? extractTextSummary(article.content)
                      : "暂无内容预览"}
                  </div>

                  {/* 底部信息 */}
                  <Space size="small">
                    <span style={{ fontSize: "12px", color: "#999" }}>
                      {dayjs(article.published_at).format("YYYY-MM-DD HH:mm")}
                    </span>
                    {article.is_read && (
                      <Tag icon={<CheckOutlined />} color="success">
                        已读
                      </Tag>
                    )}
                    {article.is_starred && (
                      <Tag icon={<StarFilled />} color="gold">
                        收藏
                      </Tag>
                    )}
                    {!article.is_starred && (
                      <StarOutlined style={{ color: "#999" }} />
                    )}
                  </Space>
                </div>
              </List.Item>
            )}
          />
        )}
      </div>

      {/* 分页器 */}
      <div
        style={{
          padding: "16px",
          borderTop: "1px solid #f0f0f0",
          textAlign: "center",
        }}
      >
        <Pagination
          current={page}
          pageSize={pageSize}
          total={total}
          onChange={onPageChange}
          showTotal={(total) => `共 ${total} 篇文章`}
          showSizeChanger={false}
        />
      </div>
    </div>
  );
}
